<template>
  <div>
    <!-- 最小使用传参 只有查询列表功能-->
    <search-table
        :headers="headers"
        :search-data="searchData"
    ></search-table>
    <!-- 默认页面使用传参 有查询、新增、删除功能-->
    <!--
      title="用户"   //组件页面展示的主题信息，详情页也使用这个
      :headers="headers"   //表单头部字段信息，同时也是详情页的字段信息
      :searchData="searchUser"  // 分页查询接口，用于查询分页的返回数据，以供渲染
      :doAdd="addUser"  //默认slot插槽，执行具体的添加逻辑
      :doUpdate="updateUser"  //默认slot插槽，执行具体的更新逻辑
      :doDelete="deleteUser"  //默认slot插槽，执行具体的删除逻辑

    -->
    <search-table
        title="用户"
        :headers="headers"
        :search-data="searchData"
        :do-add="addData"
        :do-update="updateData"
        :do-delete="deleteData"
    >
      <!--插槽，替换弹出框的详细信息等，可以自己定义弹出之后的页面 , 需要传递参数至slot，slot才能识别到-->
      <!--  <template v-slot:detail-slot  v-bind:currentUser="currentUser">
        <div>已经替换了{{currentUser}}</div>
      </template>-->
    </search-table>
  </div>
</template>

<script>
import { tablePage } from './mock'
import SearchTable from "@/components/search-table"
export default {
  name: 'tables',
  components:{SearchTable},
  data() {
    return {
      headers:[
        {key:'id',label:'ID',forbiddenEdit:true},  //默认type : input
        {key:'name',label:'姓名'},
        {key:'nickName',label:'昵称'},
        {key:'age',label:'年龄',type: 'input',subType:'number'},
        {key:'phone',label:'电话'},
        {key:'email',label:'邮件',type:"input"},
        {key:'gender',label:'性别',type:"radio",options:[{key:1,label:'男'},{key:2,label:'女'},{key:3,label:'其他'}]},
        {key:'gender',label:'性别button',type:"radio-button",options:[{key:1,label:'男'},{key:2,label:'女'},{key:3,label:'其他'}]},
        {key:'gender',label:'性别select',type:"select",options:[{key:1,label:'男'},{key:2,label:'女'},{key:3,label:'其他'}]},
        {key:'gender',label:'checkbox',type:"checkbox",options:[{key:1,label:'男'},{key:2,label:'女'},{key:3,label:'其他'}]},
        {key:'gender',label:'checkbox',type:"checkbox-button",options:[{key:1,label:'男'},{key:2,label:'女'},{key:3,label:'其他'}]},
        {key:'createTime',label:'创建日期',type:"datetime",forbiddenEdit:true},
        {key:'updateTime',label:'更新日期',type:"date",forbiddenEdit:true},
      ]
    }
  },
  mounted() {

  },
  methods: {
    addData(params){
      //新增逻辑
      return Promise.resolve(params)
    },
    searchData(params){
      return tablePage(params);
    },
    getData(params, callback){
      console.log("外层准备查询详情",params)
      callback()
    },
    updateData(params){
      console.log("外层准备修改",params)
      return Promise.resolve(params)
    },
    deleteData(params){
      console.log("外层准备删除",params)
      return Promise.resolve(params)
    },
  }
}
</script>

<style scoped lang="scss">

</style>
